<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>plugins/addhtml.js - Documentation</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="-_anonymous_-jsPDF-API.GState.html">GState</a></li><li><a href="-_anonymous_-jsPDF-API.Matrix.html">Matrix</a></li><li><a href="-_anonymous_-jsPDF-API.ShadingPattern.html">ShadingPattern</a></li><li><a href="-_anonymous_-jsPDF-API.TilingPattern.html">TilingPattern</a></li><li><a href="jsPDF.html">jsPDF</a></li></ul><h3>Global</h3><ul><li><a href="global.html#addFont">addFont</a></li><li><a href="global.html#addGState">addGState</a></li><li><a href="global.html#addHTML">addHTML</a></li><li><a href="global.html#addImage">addImage</a></li><li><a href="global.html#addMetadata">addMetadata</a></li><li><a href="global.html#addPattern">addPattern</a></li><li><a href="global.html#addSvg">addSvg</a></li><li><a href="global.html#addSvgAsImage">addSvgAsImage</a></li><li><a href="global.html#advancedAPI">advancedAPI</a></li><li><a href="global.html#arrayBufferToBase64">arrayBufferToBase64</a></li><li><a href="global.html#arrayBufferToBinaryString">arrayBufferToBinaryString</a></li><li><a href="global.html#autoPrint">autoPrint</a></li><li><a href="global.html#beginFormObject">beginFormObject</a></li><li><a href="global.html#beginTilingPattern">beginTilingPattern</a></li><li><a href="global.html#binaryStringToUint8Array">binaryStringToUint8Array</a></li><li><a href="global.html#CapJoinStyles">CapJoinStyles</a></li><li><a href="global.html#circle">circle</a></li><li><a href="global.html#clip">clip</a></li><li><a href="global.html#clip_fixed">clip_fixed</a></li><li><a href="global.html#clipEvenOdd">clipEvenOdd</a></li><li><a href="global.html#close">close</a></li><li><a href="global.html#comment">comment</a></li><li><a href="global.html#compatApi">compatApi</a></li><li><a href="global.html#curveTo">curveTo</a></li><li><a href="global.html#discardPath">discardPath</a></li><li><a href="global.html#doFormObject">doFormObject</a></li><li><a href="global.html#ellipse">ellipse</a></li><li><a href="global.html#endFormObject">endFormObject</a></li><li><a href="global.html#endTilingPattern">endTilingPattern</a></li><li><a href="global.html#fill">fill</a></li><li><a href="global.html#fillEvenOdd">fillEvenOdd</a></li><li><a href="global.html#fillStroke">fillStroke</a></li><li><a href="global.html#fillStrokeEvenOdd">fillStrokeEvenOdd</a></li><li><a href="global.html#getArraySum">getArraySum</a></li><li><a href="global.html#getFontList">getFontList</a></li><li><a href="global.html#getFontSize">getFontSize</a></li><li><a href="global.html#getFormObject">getFormObject</a></li><li><a href="global.html#getImageFileTypeByImageData">getImageFileTypeByImageData</a></li><li><a href="global.html#isAdvancedAPI">isAdvancedAPI</a></li><li><a href="global.html#line">line</a></li><li><a href="global.html#lines">lines</a></li><li><a href="global.html#lineTo">lineTo</a></li><li><a href="global.html#lstext">lstext</a></li><li><a href="global.html#matrixMult">matrixMult</a></li><li><a href="global.html#moveTo">moveTo</a></li><li><a href="global.html#output">output</a></li><li><a href="global.html#path">path</a></li><li><a href="global.html#rect">rect</a></li><li><a href="global.html#restoreGraphicsState">restoreGraphicsState</a></li><li><a href="global.html#roundedRect">roundedRect</a></li><li><a href="global.html#save">save</a></li><li><a href="global.html#saveGraphicsState">saveGraphicsState</a></li><li><a href="global.html#setCharSpace">setCharSpace</a></li><li><a href="global.html#setCurrentTransformationMatrix">setCurrentTransformationMatrix</a></li><li><a href="global.html#setDisplayMode">setDisplayMode</a></li><li><a href="global.html#setDrawColor">setDrawColor</a></li><li><a href="global.html#setFillColor">setFillColor</a></li><li><a href="global.html#setFont">setFont</a></li><li><a href="global.html#setFontSize">setFontSize</a></li><li><a href="global.html#setFontStyle">setFontStyle</a></li><li><a href="global.html#setGState">setGState</a></li><li><a href="global.html#setLanguage">setLanguage</a></li><li><a href="global.html#setLineCap">setLineCap</a></li><li><a href="global.html#setLineDashPattern">setLineDashPattern</a></li><li><a href="global.html#setLineJoin">setLineJoin</a></li><li><a href="global.html#setLineWidth">setLineWidth</a></li><li><a href="global.html#setMiterLimit">setMiterLimit</a></li><li><a href="global.html#setPage">setPage</a></li><li><a href="global.html#setProperties">setProperties</a></li><li><a href="global.html#setR2L">setR2L</a></li><li><a href="global.html#setTextColor">setTextColor</a></li><li><a href="global.html#stroke">stroke</a></li><li><a href="global.html#text">text</a></li><li><a href="global.html#triangle">triangle</a></li><li><a href="global.html#unitMatrix">unitMatrix</a></li><li><a href="global.html#validateStringAsBase64">validateStringAsBase64</a></li><li><a href="global.html#viewerPreferences">viewerPreferences</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">plugins/addhtml.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>/**
 * jsPDF addHTML PlugIn
 * Copyright (c) 2014 Diego Casorran
 *
 * Licensed under the MIT License.
 * http://opensource.org/licenses/mit-license
 */

(function(jsPDFAPI) {
  "use strict";

  /**
   * Renders an HTML element to canvas object which added to the PDF
   *
   * This feature requires [html2canvas](https://github.com/niklasvh/html2canvas)
   * or [rasterizeHTML](https://github.com/cburgmer/rasterizeHTML.js)
   *
   * @returns {jsPDF}
   * @name addHTML
   * @param element {Mixed} HTML Element, or anything supported by html2canvas.
   * @param x {Number} starting X coordinate in jsPDF instance's declared units.
   * @param y {Number} starting Y coordinate in jsPDF instance's declared units.
   * @param options {Object} Additional options, check the code below.
   * @param callback {Function} to call when the rendering has finished.
   * NOTE: Every parameter is optional except 'element' and 'callback', in such
   *       case the image is positioned at 0x0 covering the whole PDF document
   *       size. Ie, to easily take screenshots of webpages saving them to PDF.
   * @deprecated This is being replace with a vector-supporting API. See
   * [this link](https://cdn.rawgit.com/MrRio/jsPDF/master/examples/html2pdf/showcase_supported_html.html)
   */
  jsPDFAPI.addHTML = function(element, x, y, options, callback) {
    "use strict";

    if (typeof html2canvas === "undefined" &amp;&amp; typeof rasterizeHTML === "undefined")
      throw new Error(
        "You need either " +
          "https://github.com/niklasvh/html2canvas" +
          " or https://github.com/cburgmer/rasterizeHTML.js"
      );

    if (typeof x !== "number") {
      options = x;
      callback = y;
    }

    if (typeof options === "function") {
      callback = options;
      options = null;
    }

    if (typeof callback !== "function") {
      callback = function() {};
    }

    var I = this.internal,
      K = I.scaleFactor,
      W = I.pageSize.getWidth(),
      H = I.pageSize.getHeight();

    options = options || {};
    options.onrendered = function(obj) {
      x = parseInt(x) || 0;
      y = parseInt(y) || 0;
      var dim = options.dim || {};
      var margin = Object.assign({ top: 0, right: 0, bottom: 0, left: 0, useFor: "content" }, options.margin);
      var h = dim.h || Math.min(H, obj.height / K);
      var w = dim.w || Math.min(W, obj.width / K) - x;

      var format = options.format || "JPEG";
      var imageCompression = options.imageCompression || "SLOW";

      var notFittingHeight = obj.height > H - margin.top - margin.bottom;

      if (notFittingHeight &amp;&amp; options.pagesplit) {
        var cropArea = function(parmObj, parmX, parmY, parmWidth, parmHeight) {
          var canvas = document.createElement("canvas");
          canvas.height = parmHeight;
          canvas.width = parmWidth;
          var ctx = canvas.getContext("2d");
          ctx.mozImageSmoothingEnabled = false;
          ctx.webkitImageSmoothingEnabled = false;
          ctx.msImageSmoothingEnabled = false;
          ctx.imageSmoothingEnabled = false;
          ctx.fillStyle = options.backgroundColor || "#ffffff";
          ctx.fillRect(0, 0, parmWidth, parmHeight);
          ctx.drawImage(parmObj, parmX, parmY, parmWidth, parmHeight, 0, 0, parmWidth, parmHeight);
          return canvas;
        };
        var crop = function() {
          var cy = 0;
          var cx = 0;
          var position = {};
          var isOverWide = false;
          var width;
          var height;
          while (1) {
            cx = 0;
            position.top = cy !== 0 ? margin.top : y;
            position.left = cy !== 0 ? margin.left : x;
            isOverWide = (W - margin.left - margin.right) * K &lt; obj.width;
            if (margin.useFor === "content") {
              if (cy === 0) {
                width = Math.min((W - margin.left) * K, obj.width);
                height = Math.min((H - margin.top) * K, obj.height - cy);
              } else {
                width = Math.min(W * K, obj.width);
                height = Math.min(H * K, obj.height - cy);
                position.top = 0;
              }
            } else {
              width = Math.min((W - margin.left - margin.right) * K, obj.width);
              height = Math.min((H - margin.bottom - margin.top) * K, obj.height - cy);
            }
            if (isOverWide) {
              while (1) {
                if (margin.useFor === "content") {
                  if (cx === 0) {
                    width = Math.min((W - margin.left) * K, obj.width);
                  } else {
                    width = Math.min(W * K, obj.width - cx);
                    position.left = 0;
                  }
                }
                var canvas = cropArea(obj, cx, cy, width, height);
                var args = [
                  canvas,
                  position.left,
                  position.top,
                  canvas.width / K,
                  canvas.height / K,
                  format,
                  null,
                  imageCompression
                ];
                this.addImage.apply(this, args);
                cx += width;
                if (cx >= obj.width) {
                  break;
                }
                this.addPage();
              }
            } else {
              var canvas = cropArea(obj, 0, cy, width, height);
              var args = [
                canvas,
                position.left,
                position.top,
                canvas.width / K,
                canvas.height / K,
                format,
                null,
                imageCompression
              ];
              this.addImage.apply(this, args);
            }
            cy += height;
            if (cy >= obj.height) {
              break;
            }
            this.addPage();
          }
          callback(w, cy, null, args);
        }.bind(this);
        if (obj.nodeName === "CANVAS") {
          var img = new Image();
          img.onload = crop;
          img.src = obj.toDataURL("image/png");
          obj = img;
        } else {
          crop();
        }
      } else {
        var alias = Math.random().toString(35);
        var args = [obj, x, y, w, h, format, alias, imageCompression];

        this.addImage.apply(this, args);

        callback(w, h, alias, args);
      }
    }.bind(this);

    if (typeof html2canvas !== "undefined" &amp;&amp; !options.rstz) {
      return html2canvas(element, options);
    }

    if (typeof rasterizeHTML !== "undefined") {
      var meth = "drawDocument";
      if (typeof element === "string") {
        meth = /^http/.test(element) ? "drawURL" : "drawHTML";
      }
      options.width = options.width || W * K;
      return rasterizeHTML[meth](element, void 0, options).then(
        function(r) {
          options.onrendered(r.image);
        },
        function(e) {
          callback(null, e);
        }
      );
    }

    return null;
  };
})(jsPDF.API);
</code></pre>
        </article>
    </section>




</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Fri Sep 28 2018 18:01:09 GMT+0200 (Mitteleuropäische Sommerzeit) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>
